<template>
  <div>
    <BasicTable @register="registerTable">
      <!--操作按钮-->
      <template #toolbar>
        <a-button type="primary" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="hasSelectedRows">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="handleBatchDelete"> <Icon icon="ant-design:delete-outlined"></Icon> 删除 </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作<Icon icon="mdi:chevron-down"></Icon></a-button>
        </a-dropdown>
      </template>
      <!--行内操作-->
      <template #action="{ column, record, index }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <!--添加编辑-->
    <NfcDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup name="nfc-list">
  import { BasicTable, TableAction, ActionItem } from '@apps/antd-admin/src/components/Table';
  import { useDrawer } from '@apps/antd-admin/src/components/Drawer';
  import { useBaseTable } from '@apps/antd-admin/src/hooks';
  const [registerDrawer, { openDrawer }] = useDrawer();
  import NfcDrawer from './components/NfcDrawer.vue';
  import { Api } from './data/nfc.api';
  import { columns, searchFormSchema } from './data/nfc.data';
  //初始化Table
  const {tableContext, handleDelete, handleSuccess, handleBatchDelete} = useBaseTable({
    designScope: 'nfc-template',
    tableProps: {
      title: '标签管理',
      columns: columns,
      //主键字段
      rowKey: 'undefined',
      //分页列表接口
      listUrl: Api.page,
      //删除接口
      delUrl: Api.remove,
      //是否显示索引列
      showIndexColumn: true,
      //查询form配置
      formConfig: {
        schemas: searchFormSchema,
      },
      //操作列配置
      actionColumn: {
        fixed: 'right',
        width: 120,
      },
    },
  });
  const [registerTable, {reload}, {rowSelection, hasSelectedRows}] = tableContext;

  /**
   * 行内操作栏
   */
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '编辑',
        icon: 'clarity:note-edit-line',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record): ActionItem[] {
    return [
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          icon: 'ant-design:delete-outlined',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  /**
   * 编辑事件
   * @param record
   */
  function handleEdit(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }
</script>
